<template>
  <!-- 推式建议 -->
  <div>
    <el-button type="primary" style="margin-bottom: 15px;" @click="handleUpdatePushSuggest">更新推式建议</el-button>
    <!-- :fetchapi="fetchapi"
      :params="fetchParams" -->
    <FilterTable
      ref="topTable"
      columnsRef="partPartPurchasePurchaseOrderCreatePushSuggestList"
      height="auto"
      :maxHeight="isFullScreen ? tableMaxHeiht : isMiniScreen ? 220 : 300"
      :dataSource="tableDataList"
      :columns="topColumns"
      :isMemoryPagination="true"
      :onRowSelectChange="handleRowSelectChange"
      :onEnterEvent="handlePartEnterEvent"
      :pageSize="40"
      :onColumnsChange="columns => (this.topColumns = columns)"
    ></FilterTable>
    <!-- 类型选择 -->
    <el-radio-group v-model="yearFilterType" style="margin: 10px 0;">
      <el-radio label="1">上年同期比</el-radio>
      <el-radio label="2">本年各期比</el-radio>
    </el-radio-group>
    <FilterTable
      ref="bottomTable"
      height="74px"
      :isSelectColumn="false"
      :isToperInfo="false"
      :isColumnFilter="false"
      :fetchapi="bottomApi"
      :params="bottomFetchParams"
      :columns="bottomColumns"
      :isPagination="false"
      columnsRef="partPartPurchasePurchaseOrderCreatePushSuggestList1"
      :onColumnsChange="columns => (this.bottomColumns = columns)"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>

    <!-- 替换件查看弹窗 -->
    <BaseDialog :visible.sync="replacePartVisible" title="查看替换件" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <replaceAndInventory :partInfo="visibleReplacePartInfo"></replaceAndInventory>
    </BaseDialog>
  </div>
</template>

<script>
import { queryPushSuggestion, queryPartMonthReport } from '@/api/part/partPurchase/purchaseOrder';
import replaceAndInventory from '@/pages/part/report/replaceAndInventory';

export default {
  components: {
    replaceAndInventory
  },
  props: {
    dialogStatus: String
  },
  data() {
    return {
      topColumns: this.createTopColumns(),
      bottomFormList: this.createBottomFormList(),
      bottomColumns: this.createBottomColumns(),
      fetchapi: queryPushSuggestion,
      fetchParams: { xhrAbort: false },
      selectedRowList: [], // 选中的配件列表
      queryInfoPart: {}, // 查询年年化信息的配件信息
      bottomApi: queryPartMonthReport,
      bottomFetchParams: { xhrAbort: true },
      yearFilterType: '1', // 下方筛选条件
      tableMaxHeiht: 0, // table最大高度
      isMiniScreen: false,
      tableDataList: [],
      replacePartVisible: false, // 是否显示替换件弹窗
      visibleReplacePartInfo: {}
    };
  },
  computed: {
    isFullScreen() {
      return this.dialogStatus == 'fullscreen';
    }
  },
  watch: {
    yearFilterType(newVal, oldVal) {
      if (this.queryInfoPart.partNo) {
        this.handlePartEnterEvent();
      }
    }
  },
  mounted() {
    // 437
    // console.log(window.innerHeight, '屏幕高度');
    this.tableMaxHeiht = window.innerHeight - 437;
    this.isMiniScreen = window.innerHeight < 900;
    this.handleUpdatePushSuggest();
  },
  methods: {
    createTopColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'handle',
          render: params => {
            return (
              <el-button
                type="text"
                onClick={() => {
                  this.handleCheckReplacePart(params.row);
                }}
              >
                查看替换件
              </el-button>
            );
          }
        },
        {
          title: '行项',
          dataIndex: 'index',
          render: params => {
            return <span>{params.row.$index + 1}</span>;
          },
          sorter: true
        },
        {
          title: '订单编号',
          dataIndex: 'zxlh',
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '批次号',
        //   dataIndex: 'vLotNo'
        // },
        {
          title: '配件代码',
          dataIndex: 'partNo',
          widht: 150,
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配件名称',
          dataIndex: 'partName',
          showOverflowTooltip: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '替换状态',
        //   dataIndex: 'a6'
        // },
        {
          title: '建议数量',
          dataIndex: 'nSuggestQty',
          filter: true,
          filterType: 'number'
        },
        {
          title: '可用库存',
          dataIndex: 'stockQuantity',
          filter: true,
          filterType: 'number'
        },
        {
          title: '订货数量',
          dataIndex: 'nOrderQty',
          editable: true,
          defaultEditable: true,
          editType: 'number',
          editDisableRender: params => {
            return <el-input value={params.row.nOrderQty}></el-input>;
          },
          filter: true,
          filterType: 'number'
        },
        {
          title: '在途数量',
          dataIndex: 'ztOrderQty',
          filter: true,
          filterType: 'number'
        },
        {
          title: '包装单位',
          dataIndex: 'packageUnit',
          filter: true,
          filterType: 'input'
        },
        {
          title: '批发单价',
          dataIndex: 'planPrice',
          filter: true,
          filterType: 'number'
        },
        {
          title: '月需求数量',
          dataIndex: 'zyxq',
          filter: true,
          filterType: 'number'
        },
        {
          title: '销售稳定性',
          dataIndex: 'absa',
          filter: true,
          filterType: 'number'
        },
        {
          title: '最小库存标准',
          dataIndex: 'smin',
          filter: true,
          filterType: 'number'
        },
        {
          title: '最大库存标准',
          dataIndex: 'smax',
          filter: true,
          filterType: 'number'
        },
        {
          title: '配件组别',
          dataIndex: 'dg',
          filter: true,
          filterType: 'input'
        },
        {
          title: '采购价',
          dataIndex: 'hep',
          filter: true,
          filterType: 'number'
        },
        {
          title: '采购额',
          dataIndex: 'zcge',
          filter: true,
          filterType: 'number'
        }
      ];
    },
    createBottomFormList() {
      return [
        {
          type: 'RADIO',
          label: '',
          fieldName: 'a1',
          initialValue: 1,
          itemList: [
            { text: '上年同期比', value: 1 },
            { text: '本年各期比', value: 2 }
          ]
        }
      ];
    },
    createBottomColumns() {
      return [
        {
          title: '一月',
          dataIndex: 'outQuantity1'
        },
        {
          title: '二月',
          dataIndex: 'outQuantity2'
        },
        {
          title: '三月',
          dataIndex: 'outQuantity3'
        },
        {
          title: '四月',
          dataIndex: 'outQuantity4'
        },
        {
          title: '五月',
          dataIndex: 'outQuantity5'
        },
        {
          title: '六月',
          dataIndex: 'outQuantity6'
        },
        {
          title: '七月',
          dataIndex: 'outQuantity7'
        },
        {
          title: '八月',
          dataIndex: 'outQuantity8'
        },
        {
          title: '九月',
          dataIndex: 'outQuantity9'
        },
        {
          title: '十月',
          dataIndex: 'outQuantity10'
        },
        {
          title: '十一月',
          dataIndex: 'outQuantity11'
        },
        {
          title: '十二月',
          dataIndex: 'outQuantity12'
        }
      ];
    },
    // tbale选择变化
    handleRowSelectChange(e) {
      this.selectedRowList = e;
    },
    // 配件单击或者双击
    handlePartEnterEvent(e) {
      console.log(e);
      this.bottomFetchParams.xhrAbort = true;
      let yearInfo = this.queryYearInfo();
      this.queryInfoPart = e || this.queryInfoPart;
      this.bottomFetchParams = Object.assign(this.bottomFetchParams, {
        xhrAbort: false,
        reportYear: this.yearFilterType == 1 ? yearInfo.lastYear : yearInfo.thisYear,
        partNo: this.queryInfoPart.partNo
      });
    },
    // 点击更新推式建议
    async handleUpdatePushSuggest() {
      this.$refs.topTable.START_LOADING();
      let res = await this.fetchapi();
      this.$refs.topTable.STOP_LOADING();
      if (res.resultCode == 200) {
        this.tableDataList = res.data;
      }
      // this.fetchParams.xhrAbort = true;
      // this.fetchParams.xhrAbort = false;
    },
    // 点击确定按钮
    handleConfirm() {
      if (this.selectedRowList.length) {
        this.selectedRowList.forEach(item => {
          item.dDemand = new Date();
        });
        this.$emit('onConfirm', this.selectedRowList);
      }
      this.handleCancle();
    },
    handleCancle() {
      this.$emit('close');
    },
    queryYearInfo() {
      let date = new Date();
      return {
        thisYear: date.getFullYear(),
        lastYear: date.getFullYear() - 1
      };
    },
    // 点击查看替代件
    handleCheckReplacePart(row) {
      this.visibleReplacePartInfo = row;
      this.replacePartVisible = true;
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
